<template>
  <div class="home">
    <mobilenavHeader />

    <!-- 轮播图部分 -->
    <van-swipe class="home-swipe" :autoplay="3000" indicator-color="#fff">
      <van-swipe-item v-for="item in imglist" :key="item.path">
        <div class="swipe-item">
          <img :src="item.path" alt="banner" />
          <div class="swipe-content">
            <h1>{{ item.tle1 }}</h1>
            <h3>{{ item.tle2 }}</h3>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>

    <!-- 公司简介部分 -->
    <div class="description">
      <div class="description-content">
        <h2>西安友盟智能科技</h2>
        <p>
          西安友盟智能科技有限公司（2021年成立，简称：友盟智能科技）是一家专注从事企业数据治理、数据共享以及数据服务的高新科技公司，公司业务涉及医疗、医药、金融、教育、政务、电力、通信等多个行业。
        </p>
        <p>
          目前公司运用云计算、大数据及人工智能技术，已为医药、医疗、大健康等行业提供简单、安全、高效、合规的信息智能化解决方案。
        </p>

        <!-- 数据统计 -->
        <div class="stats-grid">
          <div
            v-for="item in descriptionlist"
            :key="item.text"
            class="stat-item"
          >
            <div class="number">
              <span class="value">{{ item.num }}</span>
              <span class="plus">+</span>
            </div>
            <div class="label">{{ item.text }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 服务卡片部分 -->
    <div class="services">
      <van-grid :column-num="2" :gutter="10">
        <van-grid-item v-for="item in cardList" :key="item.tle">
          <div class="service-card">
            <img :src="item.path" :alt="item.tle" />
            <h3>{{ item.tle }}</h3>
            <div class="divider"></div>
            <p v-for="desc in item.tleDesc" :key="desc">{{ desc }}</p>
          </div>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 案例展示部分 -->
    <div class="examples">
      <h2>案例展示</h2>
      <p>
        您的满意，见证专业魅力。经验厚实，策划精妙，执行到位，服务优质，尽显专业风采
      </p>

      <van-swipe class="examples-swipe" :loop="true" indicator-color="#666">
        <van-swipe-item
          v-for="(item, index) in [...exampleList, ...exampleList2]"
          :key="index"
          @click="godetailPage(index + 1)"
        >
          <div class="example-card">
            <div class="title">{{ item.title }}</div>
            <!-- <div class="subtitle">{{ item.desc.split("，")[0] }}</div> -->
            <img :src="item.path" />
            <div class="description">【{{ item.title }}】{{ item.desc }}</div>
          </div>
        </van-swipe-item>
      </van-swipe>

      <van-button type="primary" size="small" @click="goDetails">
        更多 <van-icon name="arrow" />
      </van-button>
    </div>

    <back-top />
    <mobilebottom />
  </div>
</template>

<style lang="scss" scoped>
.home {
  &-swipe {
    height: 100vh;

    .swipe-item {
      position: relative;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(50%);
      }

      .swipe-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: #fff;
        width: 90%;

        h1 {
          font-size: 24px;
          margin-bottom: 12px;
          font-weight: 700;
        }

        h3 {
          font-size: 16px;
          line-height: 1.5;
        }
      }
    }
  }
}

.description {
  // background: linear-gradient(to bottom, #93d2f3, #fff);
  padding: 40px 20px;

  &-content {
    h2 {
      font-size: 24px;
      margin-bottom: 20px;
      text-align: center;
      color: #000;
    }

    p {
      font-size: 14px;
      line-height: 1.6;
      color: #377f7f;
      margin-bottom: 15px;
    }
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 30px;

  .stat-item {
    text-align: center;

    .number {
      display: flex;
      justify-content: center;
      align-items: baseline;

      .value {
        font-size: 36px;
        font-weight: bold;
        color: #6c6c6c;
      }

      .plus {
        font-size: 24px;
        color: #6c6c6c;
      }
    }

    .label {
      font-size: 14px;
      color: #6c6c6c;
      margin-top: 5px;
    }
  }
}

.services {
  padding: 40px 15px;
  background-image: url("@/assets/img/home/cardbg1.png");
  background-size: cover;

  .service-card {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    height: 100%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

    img {
      width: 40px;
      height: 40px;
      margin-bottom: 10px;
    }

    h3 {
      font-size: 16px;
      margin-bottom: 10px;
      text-align: center;
    }

    .divider {
      width: 30px;
      height: 1px;
      background: #ddd;
      margin: 10px auto;
    }

    p {
      font-size: 12px;
      color: #666;
      text-align: center;
      margin: 5px 0;
    }
  }
}

.examples {
  background: linear-gradient(to bottom, #93d2f3, #fff);
  padding: 40px 20px;
  text-align: center;

  h2 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #000;
  }

  p {
    font-size: 14px;
    color: #666;
    margin-bottom: 30px;
  }

  &-swipe {
    margin-bottom: 30px;
    :deep(.van-swipe__indicator) {
      background-color: #9298a2;
    }
    .example-card {
      margin: 0 10px;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;

      .title {
        font-size: 18px;
        font-weight: bold;
        margin: 15px;
        color: #000;
      }

      .subtitle {
        font-size: 14px;
        color: #666;
        margin: 0 15px 15px;
      }

      img {
        width: 100%;
        height: 160px;
        object-fit: cover;
      }

      .description {
        padding: 15px;
        font-size: 14px;
        text-align: left;
        line-height: 1.5;
        color: #333;
        height: 90px;
      }
    }
  }
}
</style>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import img1 from "@/assets/img/home/bg1.png";
import img2 from "@/assets/img/home/bg2.png";
import img3 from "@/assets/img/home/bg3.png";
import kq from "@/assets/img/example/hrkq.png";
import ai from "@/assets/img/example/aizs.png";
import sj from "@/assets/img/example/jtsj.png";
import cj from "@/assets/img/example/sjcj.png";
import zsj from "@/assets/img/example/sjgl.png";
import qx from "@/assets/img/example/sjqx.png";
import cardimg1 from "@/assets/img/home/aiapp.png";
import cardimg2 from "@/assets/img/home/yyapp.png";
import cardimg3 from "@/assets/img/home/custom.png";
import cardimg4 from "@/assets/img/home/delp.png";
const router = useRouter();
import mobilenavHeader from "@/components/mobilenavHeader.vue";
import mobilebottom from "@/components/mobilebottom.vue";
import BackTop from "@/components/BackTop.vue";
let exampleList = reactive([
  {
    path: cj,
    title: "渠道数据采集",
    desc: "多渠道数据汇聚，精准采集助力决策",
  },
  {
    path: zsj,
    title: "主数据管理",
    desc: "统一主数据管理，提升数据准确性",
  },
  {
    path: qx,
    title: "渠道数据清洗",
    desc: "智能清洗渠道数据，确保数据纯净高效",
  },
]);
let exampleList2 = reactive([
  {
    path: ai,
    title: "企业AI助手",
    desc: "智能AI助手，助力企业高效办公",
  },
  {
    path: kq,
    title: "HR考勤数据汇总",
    desc: "实时汇总考勤数据，提升HR管理效率",
  },
  {
    path: sj,
    title: "集团审计管理",
    desc: "全流程审计管理，保障集团运营合规",
  },
]);
let imglist = reactive([
  {
    path: img1,
    tle1: "引领智能时代，驱动企业未来",
    tle2: "从客户服务到市场营销，AI助力企业运营全面升级",
  },
  {
    path: img2,
    tle1: "精准营销，数据驱动",
    tle2: "通过渠道数据采集与分析，实现医药营销的智能化转型",
  },
  {
    path: img3,
    tle1: "专属解决方案，满足独特需求",
    tle2: "无论是APP、小程序还是网站建设，我们提供一站式定制化开发服务",
  },
]);
let descriptionlist = reactive([
  {
    num: "100",
    text: "完成项目",
  },
  {
    num: "500",
    text: "一起成长的客户",
  },
  {
    num: "200",
    text: "合作伙伴",
  },
]);
let cardList = reactive([
  {
    path: cardimg1,
    tle: "AI企业应用",
    tleDesc: ["客户服务", "运营管理", "市场营销", "企业大模型训练"],
  },
  {
    path: cardimg2,
    tle: "医药营销应用",
    tleDesc: ["渠道数据采集", "主数据管理", "渠道数据清洗", "渠道数据分析"],
  },
  {
    path: cardimg3,
    tle: "定制化开发",
    tleDesc: ["渠道数据中台", "APP开发", "小程序开发", "网站建设"],
  },
  {
    path: cardimg4,
    tle: "其他应用",
    tleDesc: [
      "HR考勤数据汇总系统",
      "审计管理系统",
      "舆情监控系统",
      "电商产品销量分析",
    ],
  },
]);
function goDetails() {
  router.push({
    name: "Example",
  });
}
const godetailPage = (i: number) => {
  if (i == 1) {
    // 渠道数据采集
    router.push({
      name: "Exampleitem2",
    });
  } else if (i == 2) {
    // 渠道数据采集
    router.push({
      name: "Exampleitem",
    });
  } else if (i == 3) {
    // 渠道数据清洗
    router.push({
      name: "Exampleitem3",
    });
  } else if (i == 4) {
    // AI分析助手
    router.push({
      name: "Exampleitem4",
    });
  } else if (i == 5) {
    // HR考勤数据汇总
    router.push({
      name: "Exampleitem5",
    });
  } else if (i == 6) {
    // 集团审计管理
    router.push({
      name: "Exampleitem6",
    });
  }
};
</script>
